<template>
  <div class="container" v-bind:style="{height: windowHeight + 'px' }">
    <div class="panelheader" v-if="show_jingli == 1"><span class="shu"></span>小组规划</div>
    <div class="partment" v-if="show_jingli == 1">
      <div class="partment_details" v-for="(item,a) in list_jingli" :key="item.departmentid" @click="get_xiaozu_info(item.departmentid)" :data-index="a">
        <div class="line1">
          <div class="names">{{item.name}}</div>
          <div class="right_arrow"></div>
        </div>
        <div class="line2 flex">
          <div class="words flex-item">规划业绩</div>
          <div class="money">￥{{item.amount}}</div>
        </div>
        <div class="worker" v-if="workerid == item.departmentid" v-for="(iteminfo,b) in workerlist" :key="iteminfo.id" :data-index="b" @tap.stop="get_plan_month(iteminfo.id)">
          <div class="worker1 flex">
            <div class="user_pic"><img :src="iteminfo.headurl || '/static/imgs/system_user.png'" alt=""></div>
            <div class="worder_info flex-item">
              <div class="name">{{iteminfo.name}}</div>
            </div>
            <div class="right_arrow"></div>
          </div>
          <div class="worder2 flex">
            <div class="words flex-item">规划业绩</div>
            <div class="money">￥{{iteminfo.amount}}</div>
          </div>
        </div>
      </div>
    </div>
    <Empty message="暂无数据" v-if="show_jingli == 0"></Empty>
    <!-- 选择客户弹窗 -->
    <div class="choose_customer" v-if="customerShow" @tap="closepop">
      <div class="customer_detail">
        <div class="choose_header">规划客户</div>
        <div class="customer_ul">
          <scroll-view scroll-y style="height: 776rpx;">
            <div class="customer_li" v-for="item in planinfomonthlist" :key="item.id" @tap="selectCustomer(item.id)">
              <div class="left">
                <span class="customer_pic">
                  <img v-if="item.headurl == 0 || !item.headurl" src="/static/imgs/system_user.png">
                  <img v-else :src="item.headurl">
                </span>
                <span class="customer_name">{{item.name}}</span>
              </div>
              <div class="worder2 customer_worder2">
                <div class="words">规划业绩:</div>
                <div class="money">￥{{item.amount}}</div>
                <div class="words">到店时间:</div>
                <div class="money">{{item.arrivetime}}</div>
              </div>
            </div>
          </scroll-view>
        </div>
      </div>
    </div>
  </div>
  <!-- <div class="container" v-else>
    <Empty message="暂无数据"></Empty>
  </div> -->
</template>

<script>
import wx from 'wx'
import moment from 'moment'
import api from '@/utils/api'
import Toast from '@/utils/toast'
import Empty from '@/components/empty'
export default {
  data () {
    return {
      windowHeight: 0,
      year: moment().year(),
      month: moment().month() + 1,
      choosevalue: '',
      num: 1,
      choosedate: '点击选择日期',
      customername: '点击选择客户名称',
      customerShow: false,
      customerList: [],
      chooseGoodslist: [],
      chooseProjectlist: [],
      gusetid: '',
      arrivetime: '',
      focus: false,
      yearplan: '',
      shoplist: [],
      show_jingli: 0,
      list_jingli: [],
      departmentid: 0,
      workerid: 0,
      workerlist: [],
      planinfomonthlist: []
    }
  },
  components: {
    Empty
  },
  onLoad (option) {
    let that = this
    // 调用应用实例的方法获取全局数据
    // this.getUserInfo()
    wx.getSystemInfo({
      success (res) {
        that.windowHeight = res.windowHeight;
      }
    })
    if (option) {
      let departmentid = option.departmentid;
      this.year = option.year;
      this.month = option.month;
      this.departmentid = option.departmentid;
      this.get_jingli_info(departmentid);
    }
  },
  onShow () {
  },
  computed: {
  },
  methods: {
    change (e) {
      console.log(e.mp)
    },
    async get_jingli_info (departmentid) {
      let starttime = Math.round(new Date(this.year, this.month - 1, 1).getTime() / 1000);
      let endtime = Math.round(new Date(this.year, this.month, 1).getTime() / 1000);
      const res = await api.getplaninfojingli({ start_time: starttime, end_time: endtime, departmentid: departmentid });
      console.log(res)
      if (res.code === '100') {
        this.list_jingli = res.data;
        this.show_jingli = 1;
      } else {
        this.list_jingli = [];
        this.show_jingli = 0;
        Toast(res.msg);
      }
    },
    async get_xiaozu_info (departmentid) {
      let starttime = Math.round(new Date(this.year, this.month - 1, 1).getTime() / 1000);
      let endtime = Math.round(new Date(this.year, this.month, 1).getTime() / 1000);
      const res = await api.getplaninfoxiaozu({ start_time: starttime, end_time: endtime, departmentid: departmentid });
      console.log(res)
      if (res.code === '100') {
        this.workerid = departmentid
        this.workerlist = res.data
      } else {
        this.workerlist = []
        Toast(res.msg);
      }
    },
    async get_plan_month (userid) {
      let starttime = Math.round(new Date(this.year, this.month - 1, 1).getTime() / 1000);
      let endtime = Math.round(new Date(this.year, this.month, 1).getTime() / 1000);
      const res = await api.getplaninfomonth({ start_time: starttime, end_time: endtime, user_id: userid });
      console.log(res)
      if (res.code === '100') {
        res.data.forEach(item => {
          item.arrivetime = moment.unix(item.arrivetime).format('YYYY-MM-DD hh:mm a');
        })
        this.planinfomonthlist = res.data;
        this.customerShow = true;
      } else {
        this.planinfomonthlist = [];
        this.customerShow = false;
        Toast(res.msg);
      }
    },
    closepop () {
      this.customerShow = false;
    },
    async onSubmit () {
    }
  }
}
</script>

<style scoped>
.container {
  background: rgba(153, 153, 153, 0.1) !important;
}
.redback {
  width: 100%;
  height: 60rpx;
  background: #ff4444;
}
.picker {
  position: absolute;
  top: 24rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 400rpx;
  height: 64rpx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0rpx 6rpx 20rpx rgba(255, 68, 68, 0.2);
  opacity: 1;
  border-radius: 32rpx;
  color: rgba(51, 51, 51, 1);
  line-height: 64rpx;
  font-size: 28rpx;
  text-align: center;
}
.picker::after {
  content: '';
  position: absolute;
  top: 25rpx;
  right: 104rpx;
  width: 26rpx;
  height: 16rpx;
  background: url(http://mytimg.178mr.com/black_arrow3.png) no-repeat;
  background-size: 100%;
}
.title {
  background: #fff;
  height: 100rpx;
  width: 100%;
  line-height: 100rpx;
  padding-left: 32rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  border-bottom: 2rpx solid rgba(112, 112, 112, 0.1);
}
.plan_details {
  width: 100%;
  background: #fff;
  padding: 32rpx 0;
}
.plan_details .plan_shop {
  padding: 0 32rpx;
  border-right: 1rpx solid rgba(153, 153, 153, 0.1);
}
.plan_details .plan_shop:last-child {
  border-right: none;
}
.plan_details .plan_shop .money {
  font-size: 30rpx;
  font-weight: 400;
  line-height: 40rpx;
  color: rgba(255, 177, 153, 1);
  margin-bottom: 28rpx;
  width: 100%;
  text-align: center;
}
.plan_details .plan_shop .shopname {
  width: 100%;
  font-size: 28rpx;
  font-weight: 400;
  line-height: 38rpx;
  color: rgba(51, 51, 51, 1);
  text-align: center;
}
.partment {
  width: 100%;
  background: #fff;
  padding-left: 32rpx;
}
.partment_details {
  width: 100%;
  padding: 30rpx 0;
  padding-right: 30rpx;
  border-bottom: 1rpx solid rgba(153, 153, 153, 0.1);
  padding-bottom: 16rpx;
}
.partment_details .line1 {
  font-size: 28rpx;
  font-weight: 400;
  line-height: 38rpx;
  color: rgba(102, 102, 102, 1);
  margin-bottom: 8rpx;
  position: relative;
}
.partment_details .line2 {
  font-size: 24rpx;
  font-weight: 400;
  line-height: 32rpx;
  color: rgba(153, 153, 153, 1);
}
.partment_details .line2 .money {
  color: rgba(255, 177, 153, 1);
}
.right_arrow {
  position: absolute;
  top: 50%;
  right: 4rpx;
  width: 12rpx;
  height: 28rpx;
  background: url(http://mytimg.178mr.com/grey_arrow.png) no-repeat;
  background-size: 100%;
  transform: translateY(-50%);
}
.panelheader {
  width: 100%;
  background: #fff;
  font-size: 32rpx;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  padding-left: 20rpx;
  margin-top: 18rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-bottom: 1rpx solid rgba(153, 153, 153, 0.1);
}
.panelheader .shu {
  display: inline-block;
  width: 4rpx;
  height: 20rpx;
  background: rgba(255, 68, 68, 1);
  border-radius: 2rpx;
  margin-right: 12rpx;
}
.worker {
  width: 100%;
  padding: 32rpx;
  padding-bottom: 0;
  margin-bottom: 20rpx;
}
.worker:last-child {
  margin-bottom: 0;
}
.worker .user_pic {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  margin-right: 16rpx;
}
.worker .user_pic img {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
}
.worker .name {
  font-size: 32rpx;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
}
.worker1 {
  margin-bottom: 20rpx;
  position: relative;
}
.worder2 {
  font-size: 24rpx;
  font-weight: 400;
  line-height: 32rpx;
  color: rgba(102, 102, 102, 1);
}
.worder2 .money {
  color: rgba(255, 177, 153, 1);
}
.choose_customer {
  /* 312*431 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 111;
}
.choose_customer .customer_detail {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 624rpx;
  height: 862rpx;
  background: rgba(255, 255, 255, 1);
  border-radius: 24rpx;
}
.choose_header {
  width: 100%;
  height: 86rpx;
  line-height: 86rpx;
  text-align: center;
  font-size: 32rpx;
  color: rgba(255, 68, 68, 1);
  border-bottom: 1rpx solid rgba(153, 153, 153, 0.1);
}
.right_arrow {
  position: absolute;
  top: 50%;
  right: 28rpx;
  width: 12rpx;
  height: 28rpx;
  background: url(http://mytimg.178mr.com/grey_arrow.png) no-repeat;
  background-size: 100%;
  transform: translateY(-50%);
}
.customer_ul {
  width: 100%;
  padding-left: 20rpx;
}
.customer_ul .customer_li {
  width: 100%;
  font-size: 32rpx;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  border-bottom: 1rpx solid rgba(153, 153, 153, 0.1);
  position: relative;
  padding-bottom: 10rpx;
}
.customer_pic {
  display: inline-block;
  width: 60rpx;
  height: 60rpx;
  position: relative;
  top: 10rpx;
  margin-right: 20rpx;
}
.customer_pic img {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
}
.customer_name {
  display: inline-block;
  height: 60rpx;
  position: relative;
  top: -5rpx;
}
.customer_worder2 div {
  display: inline-block;
  margin-right: 20rpx;
}
</style>
